import React from 'react'
import { Radio, Space, Checkbox, Empty } from 'antd'
import styles from './css.module.scss'

const Single: React.FC<QuestionComponentsType> = ({ questionlist, type }) => {
  return (
    <div>
      {questionlist.map((item, index) => (
        <div key={index}>
          <div className={styles.title} style={{ marginTop: '1.25rem' }}>
            {index + 1}.{item.title}
          </div>
          <div className={styles.options}>
            {(type === 'single' || type === 'judgment') && (
              <Radio.Group value={item.answer}>
                <Space direction="vertical" size={10}>
                  {item.options.map((option, o_index) => (
                    <Radio disabled key={o_index} value={option.option}>
                      {option.content}
                    </Radio>
                  ))}
                </Space>
              </Radio.Group>
            )}
            {type === 'multiple' && (
              <Checkbox.Group disabled style={{ width: '100%', flexDirection: 'column' }} options={item.options} defaultValue={item.answer}></Checkbox.Group>
            )}
            {/* {type === 'QA' && } */}
          </div>
          <div className={styles.detail}>{item.detail}</div>
        </div>
      ))}
      {questionlist.length < 1 && <Empty />}
    </div>
  )
}

export default Single
